import './index.scss'
import * as echarts from 'echarts';
import { useEffect } from 'react'
//功能组件


//1 基本的样式


//业务功能

//1  我在工作中=》在一个页面中 如果相同的echart 需要展示多个  =》 动态属性 =》id  注意
// 2  width => 在使用决定他的width ,height 

// 3 名称是不同的 =》动态属性

// 4 处理 echarts  bar 图的一些属性 => 不用级 =》搜索

// 5： echarts 他的数据  =》 封装 父组件给数据


// 6: echarts 后端给的数据，echarts 组件创建完毕了，但是 数据还没有过来
// 问题=》 视图中没有数据 =》 监听的 数据（动态的数据）



interface propsObj {
    id: any,
    width: number,
    title: string,
    barDatasObj: any  // 初始值  =》{}
}
function BarEcharts(props: propsObj) {


    useEffect(() => {
        //  => 写一个方法 =》 对echart 进行创建
        createEcharts()
        console.log('echarts组件创建 和 echarts 监听到 后端给的数据', props.barDatasObj);

    }, [props.barDatasObj])


    const createEcharts = () => {
    // 全局 =》 当这个组件 回来 ，再次创建  =》
       let dom:any = document.getElementById(props.id)
    //有echarts 实例
          let myChart:any =  echarts.getInstanceByDom(dom)  //获取到实例
     
         if(!myChart){
            myChart=  echarts.init(dom); 
         }

         

        //  配置项目  =》 echarts 配置属性 =》做好注释
        let option = {
            xAxis: { //x
                type: 'category',
                data: props.barDatasObj.datax
            },
            yAxis: {  //y
                type: 'value'
            },
            series: [  //数据数据
                {
                    data: props.barDatasObj.datay,
                    type: 'bar',
                    // showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    barWidth: 20,
                    label: {
                        show: true,
                        position: 'top'
                      },
                    itemStyle: {
                        normal: {
                            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                            barBorderRadius: [20, 20, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 处的颜色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 处的颜色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 处的颜色
                            }], false)

                        }

                    }
                }
            ]
        };

        myChart.setOption(option)
    }
    return (
        <div className="barEcharts" style={{ width: props.width + "%" }}>

            {/* 名称 */}

            <h4>{props.title}</h4>
            <div id={props.id} style={{ height: 300 + 'px', width: 100 + "%" }}></div>
        </div>
    )
}


export default BarEcharts